<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebSocket Client</title>
    <script>
        const socket = new WebSocket('ws://localhost:8080');

        socket.addEventListener('open', (event) => {
            console.log('Connected to WebSocket server');
            socket.send('Hello, WebSocket Server!');
        });

        socket.addEventListener('message', (event) => {
            console.log(`Received from server: ${event.data}`);
        });

        socket.addEventListener('close', (event) => {
            console.log('Disconnected from WebSocket server');
        });

        function sendMessage() {
            const message = document.getElementById('messageInput').value;
            socket.send(message);
            document.getElementById('messageInput').value = '';
        }
    </script>
</head>

<body>
    <h1>WebSocket Client</h1>
    <input type="text" id="messageInput">
    <button onclick="sendMessage()">Send Message</button>
    <div id="messages"></div>
</body>

</html>